<!DOCTYPE html>
<!--
TODO implement pausing game
TODO implement stopping/quitting game
TODO add sound
TODO explore css sprites to reduce loading time
TODO translate in French
TODO upload to website (Tony's or Sainte-Anne?)
todo add background image at the end
todo add "you win" or "you lose!"
todo ask confirm to quit
todo add score
todo add second level
todo save high score with html storage
-->
<html>

<head> 

  <meta charset=utf-8>
  <title>Canvas Tutorial - Draw a Circle</title>

  <script src="../js/edit_area/edit_area_full.js"></script>
  <script src="../js/jquery-1.5.1.min.js"></script>
  <script src="../js/jquery-ui-1.8.13.custom.min.js"></script>
  <link rel="stylesheet" href="../css/jquery-ui.css" media="screen">
  <link rel="stylesheet" href="../css/custom.css">

  <script>
    // This code is meant to be automatically included in our template.

var editor = undefined;
var libEditor = undefined;
var intervalID = undefined;
var running = false;
var paused = false;
var speaker_on = false;
var user_response;

// hover states on the static widgets
$(function(){
  $('#dialog_link, ul#icons li').hover(
    function() { $(this).addClass('ui-state-hover'); }, 
    function() { $(this).removeClass('ui-state-hover'); }
  );
});

// play button controls
$(function(){
  $("#play").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_play.png") {
        $(this).find("img").attr({src:"../images/orange_play.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_play.png") {
        $(this).find("img").attr({src:"../images/black_play.png"});
      }
    }
  );
});

$(function(){
  $("#play").click(
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_play.png") {
        $(this).find("img").attr({src:"../images/green_play.png"});
        $("#stop").find("img").attr({src:"../images/black_stop.png"});
        running = true;
        runCode();
        return false;
      }
      if (paused){
        paused = false;
        $("#pause").find("img").attr({src:"../images/black_pause.png"});
      }
    }
  );
});

// pause button controls
$(function(){
  $("#pause").hover(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/black_pause.png") {
          $(this).find("img").attr({src:"../images/orange_pause.png"});
        }
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_pause.png") {
        $(this).find("img").attr({src:"../images/black_pause.png"});
      }
    }
  );
});

$(function(){
  $("#pause").click(
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_pause.png") {
        $(this).find("img").attr({src:"../images/green_pause.png"});
        paused = true;
      }
      else{
        paused = false;
        $(this).find("img").attr({src:"../images/black_pause.png"});
      }
      return false;
    }
  );
});

// stop button controls
$(function(){
  $("#stop").hover(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/black_stop.png") {
          $(this).find("img").attr({src:"../images/orange_stop.png"});
        }
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_stop.png") {
        $(this).find("img").attr({src:"../images/black_stop.png"});
      }
    }
  );
});

function update_buttons_after_stop(){
  // to be called by user in their own code as well as here.
  $("#play").find("img").attr({src:"../images/black_play.png"});
  $("#pause").find("img").attr({src:"../images/black_pause.png"});
  $("#stop").find("img").attr({src:"../images/red_stop.png"});
}

$(function(){
  $("#stop").click(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/orange_stop.png") {
          update_buttons_after_stop();
          clearInterval(intervalID);
          running = false;
          paused = false;
        }
        return false;
      }
    }
  );
});


// sound button controls
$(function(){
  $("#sound").hover(
    function () {
      if (speaker_on){
        $(this).find("img").attr({src:"../images/orange_speaker_on.png"});
      }
      else {
        $(this).find("img").attr({src:"../images/orange_speaker.png"});
      }
    }, 
    function () {
      if (speaker_on) {
        $(this).find("img").attr({src:"../images/green_speaker_on.png"});
      }
      else {
        $(this).find("img").attr({src:"../images/black_speaker.png"});
      }
    }
  );
});

$(function(){
  $("#sound").click(
    function () {
      if (speaker_on) {
        $(this).find("img").attr({src:"../images/black_speaker.png"});
        speaker_on = false;
      }
      else {
        $(this).find("img").attr({src:"../images/green_speaker_on.png"});
        speaker_on = true;
      }
    }
  );
});

// next link controls
$(function(){
  $(".nextLink").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_forward.png") {
        $(this).find("img").attr({src:"../images/orange_forward.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_forward.png") {
        $(this).find("img").attr({src:"../images/black_forward.png"});
      }
    }
  );
});

// previous link controls
$(function(){
  $(".prevLink").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_back.png") {
        $(this).find("img").attr({src:"../images/orange_back.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_back.png") {
        $(this).find("img").attr({src:"../images/black_back.png"});
      }
    }
  );
});



function runCode() {
    if (intervalID != undefined)
        clearInterval(intervalID);
    $("#canvas")[0].getContext("2d").clearRect(0,0,
      $("#canvas")[0].width,
      $("#canvas")[0].height);

    //if there's a library defined, eval it
    if (libEditor != undefined) {
        eval(editAreaLoader.getValue("library"));
    }
        intervalID = eval(editAreaLoader.getValue("code"));
};

$(document).ready(function(){
      editAreaLoader.init({
                    id : "code"
                    ,syntax: "js"      
                    ,start_highlight: true
                    ,replace_tab_by_spaces: true
                    ,font_size: "11"
                  });
    

    var $tabs = $('#textcontainer').tabs();
        $tabs.tabs("remove", 2);
    $tabs.tabs("select", 1);  // tab 0 is the table of contents
});
  </script>

 </head>

  <body>



    <div id="header">
     <h1>Canvas Tutorial: Breakout!</h1>
    </div>


    <audio id="paddle_sound" preload>
      <source src="../sounds/kick11.wav" type="audio/x-wav">
      <source src="../sounds/kick11.ogg" type="application/ogg">
      <source src="../sounds/kick11.mp3" type="audio/mpeg">
    </audio> 

    <audio id="brick_sound" preload>
      <source src="../sounds/snare01.wav" type="audio/x-wav">
      <source src="../sounds/snare01.ogg" type="application/ogg">
      <source src="../sounds/snare01.mp3" type="audio/mpeg">
    </audio> 

    <audio id="wall_sound" preload>
      <source src="../sounds/kick6.wav" type="audio/x-wav">
      <source src="../sounds/kick6.ogg" type="application/ogg">
      <source src="../sounds/kick6.mp3" type="audio/mpeg">
    </audio> 

    <div id="canvascontainer">
         <canvas id="canvas" width="300" height="300"></canvas>
         <div id="controlIcons" style="text-align:center">
          <a id="play" href="#">
            <img src="../images/black_play.png" 
                 alt="run code" style="height:64px; border:none;"/>
          </a>
            <a id="pause" href="#">
            <img src="../images/black_pause.png" 
                 alt="pause" style="height:64px; border:none;"/>
          </a>
            <a id="stop" href="#">
            <img src="../images/black_stop.png" 
                 alt="stop" style="height:64px; border:none;"/>
          </a>
            <a id="sound" href="#">
            <img src="../images/black_speaker.png" 
                 alt="sound" style="height:64px; border:none;"/>
          </a>
             <!--<img class="runCode" src="../images/black_play.png" height="64px" onClick="runCode();"/> -->
         </div>
    </div>

    <div id="textcontainer">
      <h1 id="title">
            <a href="index.html" class="prevLink">
              <img src="../images/black_back.png" 
               alt="previous page" style="width:64px; border:none;"/>
            </a>
        Draw a Circle
            <a href="colour.html" class="nextLink">
              <img src="../images/black_forward.png" 
               alt="next page" style="width:64px; border:none;"/>
            </a>
      </h1>
      
      <ul>
          <li class="ui-tabs-nav-item"><a href="#toc"><span>Contents</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#explain"><span>Code</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#libraryContainer"><span>Library</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#comments"><span>Comments</span></a></li>
      </ul>

      <div id="toc">
        <ol>
               <li><a href="index.html"> Introduction</a></li>
               <li><a href="ball.html">Draw a Circle</a></li>
               <li><a href="colour.html">Add Some Colour</a></li>
               <li><a href="move.html">Action</a></li>
               <li><a href="library_.html">Library: an Interlude</a></li>
               <li><a href="bounce.html">Bounce!</a></li>
               <li><a href="sound.html">Sound</a></li>
               <li><a href="mute.html">Mute</a></li>
               <li><a href="paddle.html">Add a Paddle</a></li>
               <li><a href="keyboard.html">The Keyboard</a></li>
               <li><a href="mouse.html">The Mouse</a></li>
               <li><a href="bricks.html">The Bricks</a></li>
               <li><a href="finish.html">Finishing Touches</a></li>
               <li><a href="resources.html">Resources</a></li>
               <li><a href="test.html"> Introduction</a></li>
         </ol>
      </div>

      <div id="explain"> 
    The first thing we need to do is create an instance of the &lt;canvas&gt; element so that
     we can start to draw on it. If you look in the source for this page, you'll see a 
     declaration that looks like this:<br />
     <pre>&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
     This declaration creates the canvas on which we'll draw in the rest of the tutorial.
     <p>Now that we've got a canvas to draw on, let's do so:</p>
  
               <div id="codebox">
               <textarea id="code" rows=12 cols=80>
//get a reference to the canvas using jQuery's $()
var ctx = $('#canvas')[0].getContext("2d");

//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();
  </textarea>
               </div>
               <p>
    <p>The variable declaration</p>
    <pre>
    var ctx = $('#canvas')[0].getContext("2d");
    </pre>
     using jQuery's <code>$(...)</code> is a shortcut, 
     equivalent to the following pure javascript code
    <pre>
    var cv = document.getElementById("canvas");
    var ctx = cv.getContext("2d");
    </pre>
    <p>If you are not familiar with jQuery, I suggest you have a look at it
      as we will be making further use of it ... and it will likely greatly
      simplify your life if you use javascript elsewhere.
    </p>
  </p>

            <div id="experiment">
            <h2>Experiment!</h2>
            
    You may want to comment out the <code>ctx.arc(...)</code> call and try
      <code>ctx.rect(x, y, width, height)</code>.
      <p>Make sure you keep the arc and rect calls in between calls to
      <code>beginPath()</code> and <code>closePath()</code> just like the
      sample call above. You may also try substituting <code>stroke()</code>
      for <code>fill()</code>.</p>
  
            </div>
          
              <a href="index.html" class="prevLink">
                <img src="../images/black_back.png" 
                 alt="previous page" style="height:64px; border:none;"/>
              </a>
          
              <a href="colour.html" class="nextLink">
                <img src="../images/black_forward.png" 
                 alt="next page" style="height:64px; border:none;"/>
              </a>
          </br> <!-- leave room for next link image on first page -->
          <p style="font-size: 6px; color: gray;">Tutorial by Andr&eacute; Roberge</p>
      </div>
     
      <div id="libraryContainer">
      </div>

      <div id="comments">
      Nothing here yet
      </div>
    </div>

  </body>
</html>
